<template>
<div>
  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
    <el-tab-pane label="未读消息" name="first">
        <el-table :data="pager.content" style="width: 100%" stripe highlight-current-row v-loading="$store.state.loading" 
      :default-sort= "{prop:'date',order:'descending'}" >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="title" label="标题" align="center">
              <template slot-scope="scope">
                <a :href="'javascript:;'" @click="click(scope.$index, scope.row)" class="buttonText">{{scope.row.title}}</a>
              </template>
            </el-table-column>
            <el-table-column label="修改日期" sortable width="200" prop="updateDate" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left:5px">{{ scope.row.updateDate | moment('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" sortable width="200" prop="creationDate" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left:5px">{{ scope.row.creationDate | moment('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        </el-table>
      <el-pagination  :current-page="pager.pageable.pageNumber" :page-size="pager.pageable.pageSize" :total="pager.totalElements" class="pagination text-right" :page-sizes="$store.state.paginationPageSizes" :layout="$store.state.paginationLayout"></el-pagination>
    </el-tab-pane>
    <el-tab-pane label="已读消息" name="second">
      <el-table :data="pager2.content" style="width: 100%" stripe highlight-current-row v-loading="$store.state.loading" 
      :default-sort= "{prop:'date',order:'descending'}" >
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column prop="title" label="标题" align="center">
              <template slot-scope="scope">
                <a :href="'javascript:;'" @click="click2(scope.$index, scope.row)" class="buttonText">{{scope.row.title}}</a>
              </template>
            </el-table-column>
            <el-table-column label="修改日期" sortable width="200" prop="updateDate" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left:5px">{{ scope.row.updateDate | moment('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" sortable width="200" prop="creationDate" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left:5px">{{ scope.row.creationDate | moment('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>
        </el-table>
      <el-pagination  :current-page="pager2.pageable.pageNumber" :page-size="pager2.pageable.pageSize" :total="pager2.totalElements" class="pagination text-right" :page-sizes="$store.state.paginationPageSizes" :layout="$store.state.paginationLayout"></el-pagination>
    </el-tab-pane>
  </el-tabs>

  <el-dialog title="查看信息" :visible.sync="dialogVisible">
      <!-- <el-form :label-position="'right'" label-width="80px" ref="userForm" :model="userForm">
        <el-form-item label="菜单名称" prop="name">
          <el-input placeholder="请输入角色名" v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item label="路由" prop="route">
          <el-input placeholder="请输入路由" v-model="userForm.route"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state11">
          <el-switch v-model="userForm.state" active-text="启用" inactive-text="禁用" active-value="true" inactive-value="false"></el-switch>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type='textarea' v-model="userForm.summary" auto-complete='off' rows="4" clearable></el-input>
        </el-form-item>
      </el-form> -->
      <el-card class="box-card" style="color:red">
        <div class="text item">
          {{this.detailInfo.content}}
        </div>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('userForm')">确 定</el-button>
      </div>
    </el-dialog>
</div>
</template>

<script>
import testComponet from '@/views/testComponet'
  export default {
    components : { 'testComponet' : testComponet } ,
    data() {
      return {
        dialogVisible:false,
        activeName2: 'first',
        pager: {pageable:[], totalElements: 0, content: [] },
        pager2: {pageable:[], totalElements: 0, content: [] },
        userId: this.$store.state.userId,
        userForm: new Object(),
        detailInfo:new Object()
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      query(){
          this.$http.get("/api/notice/",{params:{"page":this.pager.pageable.pageNumber,"size":this.pager.pageable.pageSize,"isRead":"0","accountId":this.userId}}).then(res => {
            this.pager = res.data;
        });
          this.$http.get("/api/notice",{params:{"page":this.pager.pageable.pageNumber,"size":this.pager.pageable.pageSize,"isRead":"1","accountId":this.userId}}).then( res => {
            this.pager2 = res.data;
          })
      }
      ,
      click(index,row) {
        this.dialogVisible = true;
        this.detailInfo = row;
        this.$http.put("/api/notice/onRead?id="+this.detailInfo.id+"&isRead=1").then(res => {
          if(res.status == 200){
            this.query();
            this.$store.commit("setNoticeNum", this.$store.state.noticeNum-1);
          }
        })
      },
      click2(index,row)
      {
        this.dialogVisible = true;
      }
    },
    mounted() {
        this.query();
        this.$http.get("/api/accounts/"+this.userId+"/nickname").then(res => {
        if(res.status == 200)
        {
            if(res.data == true)
            {
                this.$confirm('系统检测到您还未设置昵称,是否要跳转?','提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push({ path: "/system/profile" });
                    this.$message({
                        type: 'success',
                        message: '跳转成功'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消跳转'
                    })
                })
            }
        }
      })
    }
  };
</script>